<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="交付项目概览" data-page-identification="m_2bf16vzme6">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_eil7xzm6ak 自定义模板_yfivr9jk64 -->
            <!--          项目须知-->
            <a-modal
                v-model:visible="state.noticeVisible"
                width="1100px"
                title="项目须知"
                centered
                :mask-closable="false"
                :keyboard="false"
                :footer="null"
                :body-style="{
                    maxHeight: '800px',
                    overflowY: 'auto'
                }"
            >
                <a-tabs v-model:activeKey="state.noticeActiveKey">
                    <a-tab-pane key="数据校验标准及解决异常问题流程图" tab="数据校验标准及解决异常问题流程图">
                        <div class="notice1"></div>
                    </a-tab-pane>
                    <a-tab-pane key="角色及主要工作事项" tab="角色及主要工作事项">
                        <div class="notice2"></div
                    ></a-tab-pane>
                    <a-tab-pane key="里程碑各角色核心任务矩阵" tab="里程碑各角色核心任务矩阵"
                        ><div class="notice3"></div
                    ></a-tab-pane>
                </a-tabs>
            </a-modal>
            <!--          项目须知-->
            <!--          附加信息-->
            <a-modal
                v-model:visible="state.addInformationVisible"
                centered
                title="附加信息"
                :mask-closable="false"
                :keyboard="false"
                width="1000px"
            >
                <div class="pj-title">
                    <div class="pj-title-son">甲方信息</div>
                </div>
                <div style="margin-bottom: 16px; color: #262626">
                    <a-row v-for="(item, index) in state.additionalInformation.ppmProjectFirstPartyDtoList">
                        <a-col :span="8">角色:{{ item.role }}</a-col>
                        <a-col :span="8">甲方姓名:{{ item.firstPartyName }}</a-col>
                        <a-col :span="8">联系方式:{{ item.contactInformation }}</a-col>
                    </a-row>
                </div>
                <div class="pj-title">
                    <div class="pj-title-son">附件</div>
                </div>
                <div class="file-box">
                    <div class="file-div">
                        <div class="title">SOW</div>
                        <div v-for="(link, index) in state.additionalInformation.ppmEnclosureDtoList" :key="index">
                            <a :href="link.url">{{ link.name }}</a>
                        </div>
                    </div>
                    <div class="file-div">
                        <div class="title">商务合同</div>
                        <div
                            v-for="(link, index) in state.additionalInformation.commercialEnclosureInfoList"
                            :key="index"
                        >
                            <a :href="link.url">{{ link.name }}</a>
                        </div>
                    </div>
                    <div class="file-div">
                        <div class="title">预算表</div>
                        <div v-for="(link, index) in state.additionalInformation.budgetEnclosureInfoList" :key="index">
                            <a :href="link.url">{{ link.name }}</a>
                        </div>
                    </div>
                    <div class="file-div">
                        <div class="title">项目信息收集表</div>
                        <div v-for="(link, index) in state.additionalInformation.projectInfoList" :key="index">
                            <a :href="link.url">{{ link.name }}</a>
                        </div>
                    </div>
                    <div class="file-div">
                        <div class="title">工控智脑部署信息搜集表</div>
                        <div
                            v-for="(link, index) in state.additionalInformation.industrialControlBrainList"
                            :key="index"
                        >
                            <a :href="link.url">{{ link.name }}</a>
                        </div>
                    </div>
                </div>
                <div class="pj-title">
                    <div class="pj-title-son">预算信息</div>
                </div>
                <a-row>
                    <a-col :span="8">项目总预算:{{ state.additionalInformation?.budget }}</a-col>
                    <a-col :span="8">人力成本预算:{{ state.additionalInformation?.humanCostBudget }}</a-col>
                    <a-col :span="8">直接费用预算:{{ state.additionalInformation?.directExpenseBudget }}</a-col>
                </a-row>
            </a-modal>
            <!--          附加信息-->
            <div class="view-second">
                <div class="top-msg">
                    <div class="base-data">
                        <div class="base-data-title">
                            <div class="title">基本信息</div>
                            <a-space>
                                <div class="approve-status">
                                    <div class="label">审批状态:</div>
                                    <div class="value">{{ state.projectDetail?.approvalStatusDesc }}</div>
                                </div>
                                <a-button
                                    size="small"
                                    type="primary"
                                    ghost
                                    @click="showAdditionalInformation"
                                    v-permission="'50001247_vid_8lxm07ggou'"
                                    ><template #icon><FileTextOutlined /></template> 附加信息</a-button
                                >
                                <a-button
                                    v-permission="'50001247_vid_s8o0vvt1jt'"
                                    size="small"
                                    type="link"
                                    @click="showNotice"
                                    ><template #icon
                                        ><ExclamationCircleFilled
                                            style="
                                                color: #ffc708;
                                                transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                                            "
                                    /></template>
                                    项目须知</a-button
                                >
                            </a-space>
                        </div>
                        <div class="base-msg" :class="statusBoxClass">
                            <div class="msg-left">
                                <!-- 左侧图标 -->
                                <div class="left-icon"></div>

                                <!-- 中间部分 -->
                                <div class="middle-box" :class="statusBtnClass">{{
                                    state.projectDetail?.projectStatus
                                }}</div>

                                <!-- 右侧文本 -->
                                <div class="right-text">{{ state.projectDetail?.name }}</div>
                            </div>
                            <div class="msg-right">
                                <a-space :size="6">
                                    <div class="label">区域工厂:</div>
                                    <div class="value">{{ state.projectDetail?.regionalFactoryName }}</div>
                                    <div class="label">产品线:</div>
                                    <div class="value">{{ state.projectDetail?.productLineName }}</div>
                                    <div class="start-icon"></div>
                                    <div class="label">项目优先级:</div>
                                    <div class="value">{{ state.projectDetail?.projectPriority }}</div>
                                    <div class="file-icon"></div>
                                    <div class="label">项目模板:</div>
                                    <div class="value">{{ state.projectDetail?.projectTemplateName }}</div>
                                </a-space>
                            </div>
                        </div>
                        <div class="leader-div">
                            <div class="president">
                                <div class="people-title">项目领导小组</div>
                                <div class="people-content">
                                    <div class="label">副总裁:</div>
                                    <div class="value">{{ state.projectDetail?.vicePresident }}</div>
                                </div>
                            </div>
                            <div class="leading">
                                <div class="people-title"> 项目负责人</div>
                                <div class="leader-right">
                                    <div class="people-content">
                                        <div class="label">项目总监:</div>
                                        <div class="value" :title="state.projectDetail?.projectDirector">{{
                                            state.projectDetail?.projectDirector
                                        }}</div>
                                    </div>
                                    <div class="people-content">
                                        <div class="label">PMO:</div>
                                        <div class="value" :title="state.projectDetail?.projectManagementOffice">{{
                                            state.projectDetail?.projectManagementOffice
                                        }}</div>
                                    </div>
                                    <div class="people-content">
                                        <div class="label">项目经理:</div>
                                        <div class="value" :title="state.projectDetail?.pmName">{{
                                            state.projectDetail?.pmName
                                        }}</div>
                                    </div>
                                    <div class="people-content">
                                        <div class="label">客户满意中心负责人:</div>
                                        <div class="value" :title="state.projectDetail?.afterSalesManager">{{
                                            state.projectDetail?.afterSalesManager
                                        }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="group-div">
                            <div class="people-title">项目组核心成员</div>
                            <div class="role-content-detail">
                                <a-row :gutter="16">
                                    <a-col
                                        :span="8"
                                        v-for="(item, index) in state.projectDetail.projectExtendsRoleList"
                                        :key="index"
                                    >
                                        <div class="role-item">
                                            <div class="role-label">{{ item.role }}</div
                                            >：
                                            <!-- 给 role-value 加 title -->
                                            <div class="role-value" :title="item.userList?.join(',')">
                                                {{ item.userList?.join(',') }}
                                            </div>
                                        </div>
                                    </a-col>
                                </a-row>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="second-div">
                    <div class="risk-view">
                        <a-row :slots="'10:14'" class="vid_06yu6lwuf7">
                            <a-col :span="10">
                                <!-- begin vid_toxfkue4zy 容器_wiogt4a4g4 -->
                                <al-box class="vid_toxfkue4zy">
                                    <!-- begin vid_jl5ou7qz6s 简单文本_q9wmjwt2qx -->
                                    <span class="vid_jl5ou7qz6s"> 项目风险概览 </span>
                                    <!-- end vid_jl5ou7qz6s 简单文本_q9wmjwt2qx -->
                                </al-box>
                                <!-- end vid_toxfkue4zy 容器_wiogt4a4g4 -->
                            </a-col>
                            <a-col :span="14">
                                <!-- begin vid_2apjl6k1x3 容器_ih9gyb262w -->
                                <al-box class="vid_2apjl6k1x3">
                                    <!-- begin vid_up9eo3kmq0 活跃风险： -->
                                    <span class="vid_up9eo3kmq0"> 活跃风险： </span>
                                    <!-- end vid_up9eo3kmq0 活跃风险： -->
                                    <!-- begin vid_9xyyp3ju67 0 -->
                                    <span
                                        class="vid_9xyyp3ju67"
                                        :style="{ 'color': state.dailyRiskList.length < 3 ? '#262626FF' : '#F5222DFF' }"
                                    >
                                        {{ state.dailyRiskList.length }}
                                    </span>
                                    <!-- end vid_9xyyp3ju67 0 -->
                                    <!-- begin vid_nc3051idjd 个 -->
                                    <span class="vid_nc3051idjd"> 个 </span>
                                    <!-- end vid_nc3051idjd 个 -->
                                </al-box>
                                <!-- end vid_2apjl6k1x3 容器_ih9gyb262w -->
                            </a-col>
                        </a-row>
                        <div class="daily-risk-wrapper">
                            <a-carousel arrows dot-position="bottom" :autoplaySpeed="10000" autoplay>
                                <template #prevArrow>
                                    <div class="custom-slick-arrow" style="left: -20px; z-index: 1">
                                        <left-outlined />
                                    </div>
                                </template>
                                <template #nextArrow>
                                    <div class="custom-slick-arrow" style="right: -20px; z-index: 1">
                                        <right-outlined />
                                    </div>
                                </template>
                                <al-box
                                    v-for="(item, index) in state.dailyRiskList"
                                    direction="vertical"
                                    :key="index"
                                    style="width: 100%; height: 318px"
                                >
                                    <al-box class="submit" align="center">
                                        <div style="margin-right: 20px">
                                            <user-outlined style="margin-right: 4px" />
                                            <span
                                                >提交人：<b>{{ item.submitter }}</b></span
                                            >
                                        </div>
                                        <div>
                                            <calendar-outlined style="margin-right: 4px" />
                                            <span
                                                >提交时间：<b>{{ item.submissionTime }}</b></span
                                            >
                                        </div>
                                    </al-box>
                                    <al-box class="detail">
                                        <!-- 任务 -->
                                        <a-row>
                                            <a-col :span="item.riskTypeEnum === 'TASK' ? 12 : 24" class="item">
                                                <div class="title">风险来源</div>
                                                <div class="content">
                                                    {{ item.riskTypeEnum === 'TASK' ? '任务' : '项目' }}风险
                                                </div>
                                            </a-col>
                                            <a-col
                                                :span="11"
                                                :offset="1"
                                                class="item"
                                                v-if="item.riskTypeEnum === 'TASK'"
                                            >
                                                <div class="title">项目阶段</div>
                                                <div class="content" :title="item.milepostName || ''">
                                                    {{ item.milepostName || '' }}
                                                </div>
                                            </a-col>
                                            <a-col :span="12" class="item" v-if="item.riskTypeEnum === 'TASK'">
                                                <div class="title">任务名称</div>
                                                <div class="content" :title="item.taskName || ''">
                                                    {{ item.taskName || '' }}
                                                </div>
                                            </a-col>

                                            <a-col
                                                :span="item.riskTypeEnum === 'TASK' ? 11 : 24"
                                                :offset="item.riskTypeEnum === 'TASK' ? 1 : 0"
                                                class="item"
                                            >
                                                <div class="title">风险描述</div>
                                                <div class="content" :title="item.riskDescription || ''">
                                                    {{ item.riskDescription || '' }}
                                                </div>
                                            </a-col>
                                            <a-col :span="24" class="item">
                                                <div class="title">解决方案</div>
                                                <div class="content" :title="item.solution || ''">
                                                    {{ item.solution || '' }}
                                                </div>
                                            </a-col>
                                        </a-row>
                                    </al-box>
                                </al-box>
                            </a-carousel>
                        </div>
                    </div>
                    <div ref="chartBoxRedat" id="chartBoxRedat" class="echart-div"></div>
                </div>
                <div class="milepost-div">
                    <div class="milepost-title-new">
                        <div class="title-font"> 项目进度详情 </div>
                        <div class="mile-right">
                            <a-radio-group v-model:value="vid_zyt36fzvxe_props.value" @change="getMilepostData">
                                <a-radio value="主流程">主流程</a-radio>
                                <a-radio value="数据专项">数据专项</a-radio>
                                <a-radio value="全品种专项">全品种专项</a-radio>
                            </a-radio-group>
                            <div
                                >计划总工时: <span class="value">{{ state.projectDetail?.workingDays }}</span>
                            </div>
                            <div
                                >实际总工时:<span class="value">{{ state.projectDetail?.actualWorkingDays }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="progress">
                        <div
                            class="no-progress"
                            v-if="xmjdState.milestoneDataList.length && xmjdState.milestoneDataList.length == 0"
                        >
                            <div class="tip">
                                <p class="message">暂无进度里程碑</p>
                            </div>
                        </div>
                        <div
                            class="timeaxis"
                            v-if="xmjdState.milestoneDataList.length && xmjdState.milestoneDataList.length > 0"
                        >
                            <template v-for="(item, index) in xmjdState.milestoneDataList" :key="item.id">
                                <div class="box">
                                    <div class="item">
                                        <p class="cercle" v-if="index === 0"></p>
                                        <caret-right-filled
                                            class="arrow"
                                            v-if="index === xmjdState.milestoneDataList.length - 1"
                                        />
                                        <div class="center">{{ item.milepostName }}</div>
                                    </div>
                                    <div class="circular">
                                        <a-tooltip :overlayStyle="overlayStyle">
                                            <template #title>
                                                <!-- <div style="width:326px ; height: 200px;"> -->
                                                <a-row style="margin-top: 5px; margin-left: 5px; margin-right: 3px">
                                                    <a-col
                                                        :span="11"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">项目阶段状态：</p>
                                                        <p
                                                            style="
                                                                font-size: 14px;
                                                                font-weight: 600;
                                                                font-family: PingFangSC-Semibold;
                                                            "
                                                            >{{ item.milepostStatus }}</p
                                                        >
                                                    </a-col>

                                                    <a-col
                                                        :span="11"
                                                        offset="2"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">任务总数：</p>
                                                        <span class="xmjd-num">{{ item.taskNum }}</span>
                                                    </a-col>
                                                </a-row>
                                                <a-row style="margin-left: 5px; margin-right: 3px">
                                                    <a-col
                                                        :span="11"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">完成进度：</p>
                                                        <p class="xmjd-num">{{ item.finishSchedule }}%</p>
                                                    </a-col>
                                                    <a-col
                                                        :span="11"
                                                        offset="2"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">时间进度：</p>
                                                        <p class="xmjd-num">{{ item.timeSchedule }}%</p>
                                                    </a-col>
                                                </a-row>
                                                <a-row style="margin-left: 5px; margin-right: 3px">
                                                    <a-col
                                                        :span="11"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">计划工时：</p>
                                                        <p class="xmjd-num" v-if="item.workingDaysNum"
                                                            >{{ Number(item.workingDaysNum) }}小时</p
                                                        >
                                                    </a-col>
                                                    <a-col
                                                        :span="11"
                                                        offset="2"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">实际工时：</p>
                                                        <p
                                                            class="xmjd-num"
                                                            :class="{
                                                                remind:
                                                                    Number(item.actualWorkingDaysNum) >
                                                                    Number(item.workingDaysNum)
                                                            }"
                                                            v-if="item.actualWorkingDaysNum"
                                                            >{{ Number(item.actualWorkingDaysNum) }}小时</p
                                                        >
                                                    </a-col>
                                                </a-row>
                                                <a-row style="margin-left: 5px; margin-right: 3px">
                                                    <a-col
                                                        :span="11"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">未启动任务数：</p>
                                                        <p
                                                            @click="
                                                                handleCheckTaskList(
                                                                    item.milepostId,
                                                                    item.unStartNum,
                                                                    'NOT_STARTED',
                                                                    item.milepostName
                                                                )
                                                            "
                                                            class="xmjd-num click-num"
                                                            >{{ item.unStartNum || 0 }}</p
                                                        >
                                                    </a-col>
                                                    <a-col
                                                        :span="11"
                                                        offset="2"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">进行中任务数：</p>
                                                        <p
                                                            @click="
                                                                handleCheckTaskList(
                                                                    item.milepostId,
                                                                    item.underwayNum,
                                                                    'IN_PROGRESS',
                                                                    item.milepostName
                                                                )
                                                            "
                                                            class="xmjd-num click-num"
                                                            >{{ item.underwayNum || 0 }}</p
                                                        >
                                                    </a-col>
                                                </a-row>
                                                <a-row style="margin-left: 5px; margin-right: 3px">
                                                    <a-col
                                                        :span="11"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">延期任务数：</p>
                                                        <p
                                                            @click="
                                                                handleCheckTaskList(
                                                                    item.milepostId,
                                                                    item.postponeNum,
                                                                    'DELAYED',
                                                                    item.milepostName
                                                                )
                                                            "
                                                            class="xmjd-num click-num"
                                                            >{{ item.postponeNum || 0 }}</p
                                                        >
                                                    </a-col>
                                                    <a-col
                                                        :span="11"
                                                        offset="2"
                                                        class="tip-tool"
                                                        style="display: flex; justify-content: space-between"
                                                    >
                                                        <p class="xmjd-title">活跃风险任务数：</p>
                                                        <p
                                                            @click="
                                                                handleCheckRiskTaskList(
                                                                    item.milepostId,
                                                                    item.activeRiskTaskNum,
                                                                    'RISK',
                                                                    item.milepostName
                                                                )
                                                            "
                                                            class="xmjd-num"
                                                            :class="{
                                                                warning: Number(item.activeRiskTaskNum) > 0,
                                                                'click-num': Number(item.activeRiskTaskNum) <= 0
                                                            }"
                                                            >{{ item.activeRiskTaskNum || 0 }}</p
                                                        >
                                                    </a-col>
                                                </a-row>
                                                <!-- </div> -->
                                            </template>
                                            <!-- <div class="no-start">
</div> -->
                                            <div class="circular" :id="`chart${index}`"></div>
                                        </a-tooltip>
                                    </div>
                                    <div class="detailed-information">
                                        <div class="message">
                                            <p class="plan">计划开始：{{ item.startTime }}</p>
                                            <p class="plan">实际开始：{{ item.actualStartTime }}</p>
                                            <p class="plan">计划完成：{{ item.endTime }}</p>
                                            <p class="plan"
                                                >实际完成：{{ item.actualFinishTime }}
                                                <span
                                                    v-if="
                                                        item.milepostStatus !== '完成' &&
                                                        item.milepostStatus !== '延期完成' &&
                                                        item.delayDay !== null
                                                    "
                                                    ><a-tag class="tag-day">延期{{ item.delayDay }}</a-tag></span
                                                >
                                            </p>
                                            <a-tag class="plan-count" v-if="item.changeNum !== 0 && item.changeNum"
                                                >变更{{ item.changeNum }}次</a-tag
                                            >
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                    <a-modal
                        v-model:visible="xmjdState.checkTaskVisible"
                        :title="xmjdState.checkTaskTitle"
                        width="1200px"
                        :footer="null"
                        centered
                    >
                        <div class="check-task-table">
                            <a-table
                                bordered
                                :scroll="{ x: '1000px', y: '450px' }"
                                :columns="xmjdState.columns"
                                :dataSource="xmjdState.dataList"
                                @resizeColumn="handleResizeColumn"
                                :pagination="false"
                            />
                        </div>
                    </a-modal>
                    <a-modal
                        v-model:visible="xmjdState.checkTaskRiskVisible"
                        title="活跃风险任务"
                        width="1200px"
                        :footer="null"
                        centered
                    >
                        <div class="check-task-table">
                            <a-table
                                bordered
                                :scroll="{ x: '1000px', y: '450px' }"
                                :columns="xmjdState.riskColumns"
                                :dataSource="xmjdState.riskDataList"
                                @resizeColumn="handleResizeColumn"
                                :pagination="false"
                            />
                        </div>
                    </a-modal>
                </div>
                <div class="risk-table">
                    <div class="title">
                        <div class="title-font"> 当前延期任务列表 </div>
                        <div style="width: 200px">
                            <a-select
                                style="width: 100%"
                                :options="[
                                    {
                                        label: '延期',
                                        value: '延期'
                                    },
                                    {
                                        label: '延期完成',
                                        value: '延期完成'
                                    }
                                ]"
                                placeholder="请选择任务状态"
                                @change="getDelayTask"
                                allow-clear
                                show-search
                                :filterOption="
                                    (input, option) => {
                                        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                    }
                                "
                                v-model:value="state.riskFilter"
                            />
                        </div>
                    </div>
                    <a-table
                        :columns="columns"
                        :data-source="state.delayTaskData"
                        bordered
                        :scroll="{
                            y: 400
                        }"
                        class="table-box"
                        :loading="state.delayLoading"
                        @resizeColumn="handleResizeStoryColumn"
                    />
                </div>
            </div>
            <!-- end vid_eil7xzm6ak 自定义模板_yfivr9jk64 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'useProjectId': {
            type: [String, Number],
            default: undefined
        },
        activeKey: String,
        refreshCount: Number
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const state = reactive({
        projectDetail: {},
        // 项目风险
        dailyRiskList: [],
        delayTaskData: [],
        delayLoading: false,
        milepostData: [],
        riskFilter: undefined,
        additionalInformation: {},
        addInformationVisible: false,
        noticeVisible: false,
        noticeActiveKey: '数据校验标准及解决异常问题流程图',
        noticeValue: undefined
    })
    const columns = ref([
        {
            title: '延期任务',
            dataIndex: 'taskName',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '所属里程碑项目阶段',
            dataIndex: 'taskStatus',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '任务状态',
            dataIndex: 'milepostName',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '延期天数',
            dataIndex: 'daysOfDelay',
            align: 'center',
            ellipsis: true,
            resizable: true
        },
        {
            title: '任务负责人',
            dataIndex: 'taskOwner',
            align: 'center',
            ellipsis: true,
            resizable: true
        }
    ])
    function handleResizeStoryColumn(w, col) {
        col.width = w
    }
    // 获取用户故事
    function getStory() {
        post('/solution-ppm/api/v2/built-in-system-ppm/project/story/search', {
            projectId: props.useProjectId
        }).then(data => {
            state.milepostData = data.data.map(item => {
                return {
                    label: item.storyName,
                    value: item.id
                }
            })
        })
    }
    const getDelayTask = () => {
        state.delayLoading = true
        post(`/solution-ppm/api/v2/built-in-system-ppm/delivery_task/delay_list`, {
            projectId: props.useProjectId,
            taskStatus: state.riskFilter,
            pageNo: 1,
            pageSize: 9999
        })
            .then(res => {
                state.delayTaskData = res.data.dataList
            })
            .finally(() => {
                state.delayLoading = false
            })
    }
    const getDailyRisk = () => {
        if (!props.useProjectId) {
            return
        }
        post(`/solution-ppm/api/v2/built-in-system-ppm/daily/queryRiskList`, {
            projectId: props.useProjectId
        }).then(res => {
            state.dailyRiskList = res
        })
    }
    const getData = async (additionParams = {}) => {
        const url = `/solution-ppm/api/v2/built-in-system-ppm/delivery_project/${props.useProjectId}`
        return get(url)
            .then(async resp => {
                state.projectDetail = resp.data

                return resp
            })
            .catch(async e => {
                return Promise.reject(e)
            })
            .finally(async () => {})
    }
    import { defineExpose } from 'vue'
    defineExpose({ getData }) // ✅ 暴露给父组件
    watch(
        () => props.useProjectId,
        val => {
            if (!props.useProjectId) {
                return
            }
            getData()
            getDailyRisk()
            getDelayTask()
            rederRendaCharts()
            getMilepostData()
        },
        { immediate: true }
    )
    import { nextTick, watch } from 'vue'
    import * as echarts from 'echarts'
    const chartBoxRedat = ref(null)
    let chartRadar = null
    function rederRendaCharts() {
        get(
            `/solution-ppm/api/v2/built-in-system-ppm/v2/delivery_project_template/project_customer_profile/${props.useProjectId}`
        ).then(res => {
            let option = {
                radar: {
                    indicator: res.data.indicator
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'radar',
                        data: [
                            {
                                value: res.data.value,
                                name: '用户画像'
                            }
                        ]
                    }
                ]
            }
            if (!chartRadar) {
                chartRadar = echarts.init(chartBoxRedat.value)
            }
            chartRadar.setOption(option)
            nextTick(() => {
                chartRadar.resize()
            })
        })
    }
    // ---------------------------雷达图------------------------------------
    //里程碑进度
    const xmjdState = reactive({
        milestoneDataList: [],
        checkTaskVisible: false,
        checkTaskRiskVisible: false,
        checkTaskTitle: '',
        columns: [
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                fixed: 'left',
                align: 'left',
                customCell: ({ rowIndex, rowSpan, aa }) => {
                    return {
                        rowSpan: rowSpan,
                        aaa: '44',
                        style: {
                            fontSize: '16px',
                            color: '#262626',
                            fontWeight: '600',
                            borderTop: aa ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },

            {
                title: '任务名称',
                dataIndex: 'taskName',
                ellipsis: true,
                resizable: true,
                width: '220px',
                fixed: 'left',
                align: 'left',
                customCell: ({ level, nodeType, aa, rowIndex }) => {
                    return {
                        style: {
                            color: `${nodeType === 'MENU' ? '#1890ff' : ''}`,
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务状态',
                dataIndex: 'taskStatus',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务进度',
                dataIndex: 'taskSchedule',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划开始',
                dataIndex: 'startTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '实际开始',
                dataIndex: 'actualStarTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划完成',
                dataIndex: 'endTime',
                ellipsis: true,
                width: '120px',
                resizable: true,
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '  实际完成',
                dataIndex: 'taskFinishTime',
                ellipsis: true,
                resizable: true,
                width: '120px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务负责人',
                dataIndex: 'taskOwner',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '审核员',
                dataIndex: 'assessorName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },

            {
                title: '任务执行人',
                resizable: true,
                dataIndex: 'taskParticipantStr',
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            }
        ],
        riskColumns: [
            {
                title: '项目阶段',
                dataIndex: 'milepostName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                fixed: 'left',
                align: 'left',
                customCell: ({ rowIndex, rowSpan, aa }) => {
                    return {
                        rowSpan: rowSpan,
                        aaa: '44',
                        style: {
                            fontSize: '16px',
                            color: '#262626',
                            fontWeight: '600',
                            borderTop: aa ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },

            {
                title: '任务名称',
                dataIndex: 'taskName',
                ellipsis: true,
                resizable: true,
                width: '220px',
                fixed: 'left',
                align: 'left',
                customCell: ({ level, nodeType, aa, rowIndex }) => {
                    return {
                        style: {
                            color: `${nodeType === 'MENU' ? '#1890ff' : ''}`,
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务状态',
                dataIndex: 'taskStatus',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '风险描述',
                dataIndex: 'riskDescription',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '解决方案',
                dataIndex: 'solution',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务进度',
                dataIndex: 'taskSchedule',
                resizable: true,
                ellipsis: false,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划开始',
                dataIndex: 'startTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '实际开始',
                dataIndex: 'actualStarTime',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '计划完成',
                dataIndex: 'endTime',
                ellipsis: true,
                width: '120px',
                resizable: true,
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '  实际完成',
                dataIndex: 'taskFinishTime',
                ellipsis: true,
                resizable: true,
                width: '120px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '任务负责人',
                dataIndex: 'taskOwner',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },
            {
                title: '审核员',
                dataIndex: 'assessorName',
                resizable: true,
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            },

            {
                title: '任务执行人',
                resizable: true,
                dataIndex: 'taskParticipantStr',
                ellipsis: true,
                width: '140px',
                align: 'center',
                customCell: ({ rowSpan, rowIndex, aa }) => {
                    return {
                        style: {
                            borderTop: aa && rowIndex ? '1px solid #3875ff' : 'none'
                        }
                    }
                }
            }
        ],
        dataList: [],
        riskDataList: []
    })
    const overlayStyle = {
        width: '400px',
        borderRadius: '4px 4px 4px 0px 2px',
        maxWidth: 'unset'
    }
    watch(
        () => [xmjdState.checkTaskRiskVisible, xmjdState.checkTaskVisible],
        () => {
            if (xmjdState.checkTaskRiskVisible === true || xmjdState.checkTaskVisible === true) {
                let toolTip = document.querySelectorAll('.ant3-tooltip')
                if (toolTip) {
                    for (let i = 0; i < toolTip.length; i++) {
                        toolTip[i].style.display = 'none'
                    }
                }
            }
        },
        { deep: true }
    )
    const vid_zyt36fzvxe_props = reactive({
        value: '主流程'
    })
    function getMilepostData() {
        const params = {
            endTime: '',
            projectId: props.useProjectId
        }
        post('/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/list', params).then(data => {
            if (data.data.dataList && data.data.dataList.length > 0) {
                xmjdState.milestoneDataList = data.data.dataList?.filter(
                    item => item.stageType === vid_zyt36fzvxe_props.value
                )
                getMilepostChart()
            } else {
                xmjdState.milestoneDataList = []
            }
        })
    }

    function getMilepostChart() {
        setTimeout(() => {
            renderCharts()
        }, 0)
    }

    function renderCharts() {
        for (let i = 0; i < xmjdState.milestoneDataList.length; i++) {
            const chartElement = document.getElementById(`chart${i}`)
            let chart = echarts.init(chartElement)

            const finishSchedule = xmjdState.milestoneDataList[i].finishSchedule

            let data

            if (finishSchedule === 100) {
                data = [{ value: 1, itemStyle: { color: '#3875ff', opacity: 1 } }]
            } else {
                const redTasks = xmjdState.milestoneDataList[i].percentageOfRedTasks
                const greenTasks = xmjdState.milestoneDataList[i].percentageOfGreenTasks
                const greyTasks = xmjdState.milestoneDataList[i].percentageOfGreyTasks

                if (redTasks === null && greenTasks === null && greyTasks === null) {
                    data = [{ value: 1, itemStyle: { color: '#788397', opacity: 0.4 } }]
                } else {
                    data = [
                        { name: '超期', value: redTasks || 0, itemStyle: { color: '#FF2A00', opacity: 1 } },
                        { name: '完成', value: greenTasks || 0, itemStyle: { color: '#38A45A', opacity: 0.8 } },
                        { name: '未开始', value: greyTasks || 0, itemStyle: { color: '#788397', opacity: 0.4 } }
                    ]
                }
            }

            let option = {
                series: [
                    {
                        type: 'pie',
                        radius: ['60%', '80%'],
                        grid: {
                            top: '5px',
                            bottom: '5px',
                            left: '5px',
                            right: '5px'
                        },
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            // 去掉鼠标移入的动效
                            scale: false
                        },
                        data: data
                    }
                ]
            }

            chart.setOption(option)
        }
    }

    function handleCheckTaskList(milepostId, num, type, milepostName) {
        if (num > 0) {
            switch (type) {
                case 'NOT_STARTED':
                    xmjdState.checkTaskTitle = '未启动任务'
                    break
                case 'IN_PROGRESS':
                    xmjdState.checkTaskTitle = '进行中任务'
                    break
                case 'DELAYED':
                    xmjdState.checkTaskTitle = '延期任务'
                    break
                default:
                    // 如果type不匹配任何case，则执行这里的代码
                    break
            }
            xmjdState.dataList = []
            post('/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/various_tasks', {
                milepostId: milepostId,
                type: type,
                milepostName: milepostName,
                projectId: props.useProjectId
            }).then(({ data }) => {
                xmjdState.checkTaskVisible = true

                xmjdState.dataList = groupCheckData(data.ppmDeliveryTaskDtoList)
            })
        }
    }

    function handleCheckRiskTaskList(milepostId, num, type, milepostName) {
        if (num > 0) {
            xmjdState.riskDataList = []
            post('/solution-ppm/api/v2/built-in-system-ppm/delivery_milepost/various_tasks', {
                milepostId: milepostId,
                type: 'RISK',
                projectId: props.useProjectId,
                milepostName: milepostName
            }).then(({ data }) => {
                xmjdState.checkTaskRiskVisible = true
                xmjdState.riskDataList = groupCheckData(data.ppmDeliveryRiskTaskList)
            })
        }
    }

    function groupCheckData(data) {
        let currentMilepostName = ''
        return data.map((item, index) => {
            if (currentMilepostName !== item.milepostName) {
                currentMilepostName = item.milepostName
                let rowSpan = 0
                for (let i = 0; i < data.length; i++) {
                    if (i >= index) {
                        if (currentMilepostName === data[i].milepostName) {
                            rowSpan += 1
                        } else {
                            break
                        }
                    }
                }
                item.rowSpan = rowSpan
                item.aa = index !== xmjdState.dataList.length - 1
            } else {
                item.rowSpan = 0
            }
            item.rowIndex = index
            return item
        })
    }

    // ================================定制化逻辑里程碑进度========================================
    // 动态监听项目状态动态样式
    const statusMap = {
        '进行中': { btn: 'xmjxz-btn', box: 'xmjxz-box' },
        '售后': { btn: 'sh-btn', box: 'sh-box' },
        '未启动': { btn: 'xmwqd-btn', box: 'xmwqd-box' },
        '完成': { btn: 'xmwc-btn', box: 'xmwc-box' },
        '延期': { btn: 'xmyq-btn', box: 'xmyq-box' },
        '延期完成': { btn: 'xmyqwc-btn', box: 'xmyqwc-box' }
    }

    const statusBtnClass = computed(() => {
        const status = state.projectDetail.projectStatus
        return statusMap[status]?.btn || 'null-btn'
    })

    const statusBoxClass = computed(() => {
        const status = state.projectDetail.projectStatus
        return statusMap[status]?.box || 'null-box'
    })

    const emit = defineEmits(['copyProject'])
    function handleCopy() {
        emit('copyProject')
    }
    function showAdditionalInformation() {
        post(
            `/solution-ppm/api/v2/built-in-system-ppm/v2/delivery_project_template/first_party_detail/${props.useProjectId}`,
            {}
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.addInformationVisible = true
            state.additionalInformation = data.data
        })
    }
    function showNotice() {
        if (!state.projectDetail.projectTemplate) {
            message.info('规则梳理中，稍后公示')
            return
        }
        post(
            `/solution-ppm/api/v2/built-in-system-ppm/v2/delivery_project_template/first_party_detail/${props.useProjectId}`,
            {}
        ).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.noticeValue = data.data
            state.noticeVisible = true
        })
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .view-second {
        padding: 4px;
        max-height: unset;
        height: calc(100vh - 210px);
        overflow: auto;
    }
    .top-msg {
        display: flex;
        gap: 16px;
        padding: 3px;
        margin-bottom: 16px;
    }

    .base-data,
    .risk-view,
    .echart-div,
    .milepost-div {
        box-shadow: 0 0 10px #ebebeb;
    }
    .base-data {
        width: 100%;
        padding: 12px 20px;
        .base-data-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            .title {
                font-size: 16px;
                height: 16px;
                color: #262626;
                line-height: 16px;
                font-weight: 600;
                padding-left: 8px;
                border-left: 4px solid #3875ff;
            }
            .approve-status {
                display: flex;
                gap: 6px;
                font-size: 14px;
                .label {
                    color: #595959;
                }
                .value {
                    color: #3875ff;
                }
            }
        }
        .base-msg {
            display: flex;
            align-items: center;
            width: 100%;
            justify-content: space-between;
            height: 40px;
            margin-bottom: 12px;
            /* 左侧图标固定大小，不挤压 */
            .msg-left {
                display: flex;
                align-items: center;
                gap: 8px;
                padding-left: 8px;
                .left-icon {
                    flex: 0 0 auto; /* 不伸缩 */
                    width: 16px;
                    height: 16px;
                    background-image: url('http://10.40.0.33:9001/file-storage/530877341241784320-source.png');
                    background-size: cover;
                }

                /* 中间固定部分，不挤压 */
                .middle-box {
                    flex: 0 0 auto;
                    margin-right: 8px;
                    white-space: nowrap;
                }

                /* 右侧文本，占满剩余空间，省略号 */
                .right-text {
                    flex: 1 1 auto; /* 可伸缩 */
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    color: #333;
                    font-size: 15px;
                    font-weight: 600;
                }
            }
            .msg-right {
                flex: 1;
                flex-shrink: 0;
                display: flex;
                justify-content: end;
                .start-icon,
                .file-icon {
                    height: 16px;
                    width: 16px;
                    background-image: url('http://10.40.0.33:9001/file-storage/530880998586791936-source.png');
                    background-size: cover;
                }
                .file-icon {
                    background-image: url('http://10.40.0.33:9001/file-storage/530881684212889600-source.png');
                }
                .label {
                    color: #595959;
                }
                .value {
                    color: #262626;
                }
            }
        }
        .leader-div {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
            .president,
            .leading {
                background: linear-gradient(180deg, #f2f6fc, transparent);
                padding: 8px 12px;
                height: 64px;
                .people-content {
                    display: flex;
                    .label {
                        flex-shrink: 0;
                        color: #595959;
                        margin-right: 4px;
                        color: #595959;
                    }
                    .value {
                        flex: 1;
                        min-width: 0;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        color: #3875ff;
                        font-weight: 600;
                    }
                }
            }
            .president {
                width: 20%;
            }
            .leading {
                flex: 1;
                .leader-right {
                    display: flex;
                    justify-content: space-between;
                    .people-content {
                        display: flex;
                        .label {
                            flex-shrink: 0;
                            color: #595959;
                            margin-right: 4px;
                            color: #595959;
                        }
                        .value {
                            flex: 1;
                            min-width: 0;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            color: #3875ff;
                            font-weight: 600;
                        }
                    }
                }
            }
            .people-title {
                font-weight: 600;
                color: #262626;
                font-size: 14px;
                margin-bottom: 8px;
            }
        }
        .group-div {
            padding-left: 12px;
            padding-top: 8px;
            padding-bottom: 8px;
            background: linear-gradient(180deg, #f2f6fc, transparent);
            .people-title {
                font-weight: 600;
                color: #262626;
                font-size: 14px;
                margin-bottom: 8px;
            }
            .role-content-detail {
                width: 100%;
                height: 100%;
                overflow-y: auto;
                overflow-x: hidden;
                .role-item {
                    display: flex;
                    align-items: center;
                    height: 32px;

                    .role-label {
                        flex-shrink: 0; // 不允许被压缩
                        color: #595959;
                        margin-right: 4px;
                    }

                    .role-value {
                        flex: 1; // 占满剩余空间
                        min-width: 0; // 关键点：允许文本缩进裁切
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        color: #3875ff;
                        font-weight: 600;
                    }
                }
            }
        }
    }
    .second-div {
        display: flex;
        gap: 16px;
        margin-bottom: 12px;
        .risk-view {
            width: 50%;
            padding: 12px 20px;
            height: 400px;
            .title {
                font-size: 16px;
                height: 16px;
                line-height: 16px;
                font-weight: 600;
                padding-left: 8px;
                border-left: 4px solid #3875ff;
                margin-bottom: 12px;
            }

            .daily-risk-wrapper .submit {
                height: 40px;
                background-image: linear-gradient(270deg, #f1f3f6 100%, #f0f2f5 0%);
                background-image: url('http://10.40.0.33:9001/file-storage/421976148877647872.png');
                background-size: contain;
                padding-left: 12px;
                font-size: 14px;
                color: #595959;
                margin-right: 16px;
                margin-bottom: 16px;
            }

            .daily-risk-wrapper .submit b {
                font-size: 14px;
                color: #262626;
            }

            .daily-risk-wrapper .detail {
                background-image: linear-gradient(270deg, rgba(56, 117, 255, 0) 0%, rgba(56, 117, 255, 0.1) 100%);
                border-radius: 2px;
                border-left: 4px solid #3875ff;
                padding: 8px 14px;
                background-image: url('http://10.40.0.33:9001/file-storage/421450255266619392.png');
                background-size: contain;
            }

            .daily-risk-wrapper .detail .item {
                display: flex;
                flex-direction: column;
                margin-bottom: 16px;
            }

            .daily-risk-wrapper .detail .title {
                font-size: 14px;
                color: #262626;
                font-weight: 600;
                position: relative;
            }

            .daily-risk-wrapper .detail .title:before {
                position: absolute;
                left: 0;
                bottom: 0;
                content: '';
                width: 100px;
                height: 7px;
                background-image: linear-gradient(90deg, rgba(56, 117, 255, 0.4) 0%, rgba(56, 117, 255, 0) 100%);
            }

            .daily-risk-wrapper .detail .content {
                font-size: 14px;
                color: #595959;
                text-align: left;
                font-weight: 400;
                height: 44px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .daily-risk-wrapper {
                padding: 0 4px;
            }

            :deep(.@{ant-prefix}ant3-carousel .slick-list) {
                height: 300px;
            }

            :deep(.ant3-carousel .slick-dots li) {
                width: 8px;
                height: 8px;
                border-radius: 4px;
            }

            :deep(.@{ant-prefix}-carousel .slick-dots li.slick-active) {
                width: 16px;
            }

            //:deep(.@{ant-prefix}-carousel .slick-slider) {
            //    width: 393px;
            //    height: 300px;
            //}

            :deep(.@{ant-prefix}-carousel .slick-dots-bottom) {
                bottom: -22px !important;
                display: none !important;
            }

            .@{ant-prefix}-carousel :deep(.slick-arrow.custom-slick-arrow) {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                font-size: 16px;
                color: #3c78ff;
                background-color: #ebf1ff;
                opacity: 0.5;
                z-index: 1;
            }

            .@{ant-prefix}-carousel :deep(.custom-slick-arrow:before) {
                display: none;
            }

            .@{ant-prefix}-carousel :deep(.custom-slick-arrow:hover) {
                opacity: 1;
            }
        }
        .echart-div {
            flex: 1;
            height: 400px;
        }
    }
    .milepost-div {
        padding: 16px 24px;
        margin-bottom: 12px;
        .milepost-title-new {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title-font {
                font-size: 16px;
                height: 16px;
                line-height: 16px;
                font-weight: 600;
                padding-left: 8px;
                border-left: 4px solid #3875ff;
            }
            .mile-right {
                display: flex;
                gap: 8px;
                .value {
                    font-weight: 600;
                    color: #3875ff;
                    font-size: 14px;
                }
            }
        }

        .progress {
            padding: 0 20px 20px 20px;
            border: 2px solid #fff;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(6px);
            margin-bottom: 24px;
            margin-top: 10px;
            color: rgb(89, 89, 89);
        }

        .progress .timeaxis {
            width: 100%;
            margin-top: 65px;
            display: flex;
            flex-flow: wrap;
            color: rgb(89, 89, 89);
        }

        .progress .no-progress {
            height: 370px;
            width: 100%;
            background-color: #fff;
            display: flex;
            justify-content: center;
            border: 1px solid #fff;
            border-radius: 10px;
            position: relative;
            /* 水平居中 */
        }

        .progress .no-progress .tip {
            width: 200px;
            height: 101px;
            position: absolute;
            background-image: url('http://10.40.0.33:9001/file-storage/404789380744112128.png');
            background-size: cover;
            top: 30%;
            color: rgb(89, 89, 89);
        }

        .progress .no-progress .tip .message {
            position: absolute;
            left: 22%;
            bottom: -40px;
            font-size: 16px;
            color: rgb(89, 89, 89);
        }

        .progress .box:nth-child(-n + 5) {
            width: 20%;
            margin: 0;
            color: rgb(89, 89, 89);
        }

        .body .right-box .progress .box:nth-child(n + 11) {
            width: 20%;
            margin-top: 63px;
        }

        .progress .box {
            width: 20%;
            margin-top: 90px;
            color: rgb(89, 89, 89);
        }

        .progress .box .item {
            border-bottom: 2px solid #6b98ff;
            position: relative;
            color: rgb(89, 89, 89);
        }

        .progress .box .item .cercle {
            position: absolute;
            width: 25px;
            height: 25px;
            border-radius: 25px;
            background-color: #6b98ff;
            border: 4px solid #d0e3ff;
            top: -11px;
            left: 0;
            color: rgb(89, 89, 89);
        }

        .progress .box .item .arrow {
            position: absolute;
            font-size: 22px;
            color: #6b98ff;
            top: -10px;
            right: -15px;
        }

        .progress .box .item .center {
            width: 100%;
            font-size: 14px;
            text-align: center;
            position: absolute;
            font-weight: 600;
            top: -58px;
            color: #333;
            height: 44px;
            display: flex;
            flex-wrap: wrap;
            padding: 0 10px;
            justify-content: center;
            align-items: center;
        }

        .progress .circular {
            width: 36px;
            height: 36px;
            background: white;
            margin: auto;
            margin-bottom: -4px;
            position: relative;
            top: -10px;
            color: rgb(89, 89, 89);
        }

        .progress .detailed-information {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            color: rgb(89, 89, 89);
        }

        .progress .detailed-information .message {
            flex: 1;
            width: 20%;
            background: linear-gradient(to bottom, #f3f7fa, #ffffff);
            border-radius: 8px;
            height: 114px;
            margin: 0 8px;
            padding: 10px;
            box-shadow: 0 4px 4px #eff0f1;
            display: flex;
            flex-direction: column;
            position: relative;
            margin-bottom: 10px;
            color: rgb(89, 89, 89);
        }

        .progress .detailed-information .message p {
            flex: 1;
            color: rgb(89, 89, 89);
        }

        .progress .detailed-information .message .plan {
            font-size: 14px;
            margin: 0;
            font-weight: normal;
            color: rgb(89, 89, 89);
            display: flex;
            align-items: center;
        }

        .progress .detailed-information .message .plan-count {
            position: absolute;
            border-radius: 2px 8px 2px 8px;
            top: 0;
            right: -8px;
        }

        .progress .detailed-information .message .tag-day {
            border-radius: 10px;
            margin: 0;
            position: absolute;
            right: 0;
            bottom: 15%;
        }
        :deep(.ant-tag) {
            border: none;
            background-color: rgba(255, 42, 0, 0.1);
            color: #ff2a00;
        }
    }

    .tip-tool p {
        margin-bottom: 12px;
    }
    /* 公共按钮样式 */
    .middle-box {
        border-radius: 2px;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        padding: 0 6px;
        height: 20px;
        line-height: 20px;
        margin: 0 auto;
        display: inline-block;
    }

    /* 不同状态按钮 */
    .xmjxz-btn {
        border: 1px solid rgba(24, 194, 255, 1);
        color: #fff !important;
        background: #18c2ff;
    }
    .xmwc-btn {
        border: 1px solid rgba(82, 196, 26, 1);
        color: #fff !important;
        background: #52c41a;
    }
    .xmyq-btn {
        border: 1px solid rgba(245, 34, 45, 0.5);
        color: #fff;
        background: #f5222d;
    }
    .xmwqd-btn {
        border: 1px solid rgba(140, 140, 140, 1);
        color: #8c8c8c !important;
    }
    .xmyqwc-btn {
        border: 1px solid #ff9846;
        color: #fff;
        background: #ff9846;
    }
    .sh-btn {
        border: 1px solid rgba(82, 196, 26, 1);
        color: #fff !important;
        background: #52c41a;
        font-size: 12px;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        min-width: 56px;
        height: 20px;
        line-height: 20px;
        margin: 0 auto;
        display: inline-block;
    }
    /* 容器背景渐变 */
    .xmjxz-box {
        background-image: linear-gradient(to right, rgba(24, 194, 255, 0.2), #fff, #fff);
    }
    .xmwc-box {
        background-image: linear-gradient(to right, #edf9e8, #fff, #fff);
    }
    .xmyq-box {
        background-image: linear-gradient(to right, rgba(245, 34, 45, 0.1), #fff, #fff);
    }
    .xmwqd-box {
        background-image: linear-gradient(to right, #8c8c8c, #fff, #fff);
    }
    .xmyqwc-box {
        background-image: linear-gradient(to right, rgba(255, 152, 70, 0.1), #fff, #fff);
    }
    .sh-box {
        background-image: linear-gradient(to right, #edf9e8, #fff, #fff);
    }
    .null-box {
        background-image: linear-gradient(to right, #f2f6fc, #fff, #fff);
    }
    .null-btn {
        width: 0;
        min-width: 0;
    }
    .risk-table {
        padding: 12px 20px;

        box-shadow: 0 0 10px #e5e5e5;
        .title {
            display: flex;
            justify-content: space-between;
        }
        .title-font {
            font-size: 16px;
            height: 16px;
            line-height: 16px;
            font-weight: 600;
            padding-left: 8px;
            border-left: 4px solid #3875ff;
            margin-bottom: 35px;
        }
    }
    .vid_06yu6lwuf7 {
        width: 100%;
        margin-bottom: 12px;
        border-style: none;
        border-color: #ffffff;
    }
    .vid_toxfkue4zy {
        display: flex;
        flex-direction: row;
    }

    .vid_jl5ou7qz6s {
        display: flex;
        flex-direction: row;
        padding-left: 8px;
        font-weight: 600;
        color: rgba(38, 38, 38, 1);
        font-size: 16px;
        line-height: 16px;
        border-left-style: solid;
        border-left-width: 4px;
        border-left-color: #3875ff;
    }

    .vid_2apjl6k1x3 {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        box-shadow: 0px 0px 0px 0px;
    }
    .table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }

    .file-box {
        display: flex;
        .file-div {
            flex: 1;
            .title {
                background-color: #3875ff;
                color: #fff7e6;
                text-align: center;
                height: 30px;
                line-height: 30px;
                margin-bottom: 5px;
            }
        }
    }
    .pj-title {
        height: 30px;
        border-bottom: 1px solid #bfbfbf;
        margin-bottom: 16px;
    }
    .pj-title-son {
        font-size: 14px;
        color: #262626;
        letter-spacing: 0;
        font-weight: 600;
        border-left: 4px solid #3875ff;
        padding-left: 5px;
        height: 18px;
        line-height: 18px;
    }
    .notice1,
    .notice2,
    .notice3 {
        background-size: cover;
        width: 1000px;
        height: 800px;
    }
    .notice1 {
        width: 1050px;
        height: 1680px;
        background-image: url('http://10.40.0.33:9001/file-storage/451889154760810496-source.svg');
    }
    .notice2 {
        background-image: url('http://10.40.0.33:9001/file-storage/451884471908474880.png');
    }
    .notice3 {
        background-image: url('http://10.40.0.33:9001/file-storage/455877574581460992-source.svg');
    }
</style>
